<template>
  <div class="prescription-detail">
    <van-loading v-if="!prescriptionInfo" class="loading" size="24px" vertical>加载中...</van-loading>
    <template v-else>
      <div class="detail-card">
        <!-- 处方基本信息 -->
        <div class="info-section">
          <div class="section-title">处方信息</div>
          <van-cell-group inset>
            <van-cell title="处方单号" :value="prescriptionInfo.prescriptionId" />
            <van-cell title="开具时间" :value="prescriptionInfo.prescriptionDate" />
            <van-cell title="处方总金额" :value="`¥${prescriptionInfo.totalPrice}`" />
            <van-cell title="处方状态">
              <template #value>
                <van-tag :type="getStatusType(prescriptionInfo.status)">{{ STATUS_ENUM[prescriptionInfo.status] }}</van-tag>
              </template>
            </van-cell>
            <van-cell title="医生建议">
              <template #value>
                <van-text-ellipsis
                    rows="1"
                    :content="prescriptionInfo.prescriptionDescribe || '暂无建议'"
                    expand-text="展开"
                    collapse-text="收起"
                    position="right"
                />
              </template>
            </van-cell>
          </van-cell-group>
        </div>

        <!-- 支付按钮 -->
        <div v-if="prescriptionInfo.status === 0" class="payment-section">
          <van-button type="primary" block @click="showPaymentPopup">去付款</van-button>
        </div>

        <!-- 医生信息 -->
        <div class="info-section">
          <div class="section-title">医生信息</div>
          <van-cell-group inset>
            <van-cell center>
              <template #title>
                <div class="doctor-info">
                  <van-image
                    :src="prescriptionInfo.imgUrl"
                    width="60"
                    height="60"
                    radius="4"
                  />
                  <div class="doctor-details">
                    <div class="doctor-name">{{ prescriptionInfo.doctorName }}</div>
                    <div class="doctor-title">{{ prescriptionInfo.title }}</div>
                    <div class="department">{{ prescriptionInfo.departmentName }}</div>
                  </div>
                </div>
              </template>
            </van-cell>
          </van-cell-group>
        </div>

        <!-- 就诊人信息 -->
        <div class="info-section">
          <div class="section-title">就诊人信息</div>
          <van-cell-group inset>
            <van-cell title="姓名" :value="prescriptionInfo.patientName" />
            <van-cell title="性别" :value="prescriptionInfo.gender" />
            <van-cell title="年龄" :value="prescriptionInfo.age" />
            <van-cell title="手机号" :value="prescriptionInfo.phone" />
            <van-cell title="身份证号" :value="prescriptionInfo.identity" />
          </van-cell-group>
        </div>

        <!-- 药品清单 -->
        <div class="info-section">
          <div class="section-title">药品清单</div>
          <van-cell-group inset>
            <div v-if="prescriptionInfo.medicineList && prescriptionInfo.medicineList.length > 0">
              <div v-for="medicine in prescriptionInfo.medicineList" :key="medicine.medicineId" class="medicine-item">
                <van-cell :title="medicine.medicineName" :label="medicine.medicineSpecification" />
<van-cell title="数量" :value="medicine.quantity" />
<van-cell title="单价" :value="`¥${medicine.medicinePrice}`" />
<van-cell title="用药说明" :label="medicine.usedDescription" />
              </div>
            </div>
            <div v-else class="empty-tip">暂无药品信息</div>
          </van-cell-group>
        </div>
      </div>
    </template>

    <!-- 支付方式选择弹窗 -->
    <van-popup v-model:show="showPayment" position="bottom" round>
      <div class="payment-popup">
        <div class="payment-title">选择支付方式</div>
        <div class="payment-options">
          <van-cell title="支付宝支付" is-link @click="handlePayment('alipay')" />
          <van-cell title="微信支付" is-link @click="handlePayment('wechat')" />
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import {
  NavBar,
  CellGroup,
  Cell,
  Tag,
  Loading,
  Button,
  Popup,
  showToast,
  showLoadingToast,
  closeToast,
  showFailToast,
  showSuccessToast
} from 'vant';
import { getPrescriptionByIdAPI, updatePrescriptionStatusAPI } from "../../api/prescription/prescription.js";

const route = useRoute();
const router = useRouter();
const prescriptionInfo = ref(null);
const showPayment = ref(false);

// 返回上一页
const goBack = () => {
  router.back();
};

// 获取状态标签类型 0-待付款 1-待取药 2-已完成
const getStatusType = (status) => {
  switch (status) {
    case 0:
      return 'warning';
    case 1:
      return 'success';
    case 2:
      return 'primary';
    default:
      return 'default';
  }
};

// 状态枚举值
const STATUS_ENUM = ['待付款', '待取药', '已完成'];

// 显示支付弹窗
const showPaymentPopup = () => {
  showPayment.value = true;
};

// 处理支付
const handlePayment = async (paymentType) => {
  showPayment.value = false;
  const loading = showLoadingToast({
    message: '正在处理支付...',
    forbidClick: true,
  });

  try {
    const res = await updatePrescriptionStatusAPI(prescriptionInfo.value.prescriptionId);
    if (res.success) {
      // 支付成功
      closeToast();
      // 更新订单状态
      prescriptionInfo.value.status = 1;
      showSuccessToast('支付成功');
      // 延迟返回上一页
      setTimeout(() => {
        router.back();
      }, 1500);
    }
  } catch (error) {
    showFailToast('支付失败');
  }
  closeToast();
};

// 获取处方详情
const getPrescriptionDetail = async () => {
  const prescriptionId = route.query.prescriptionId;
  if (!prescriptionId) {
    router.back();
    return;
  }
  
  const res = await getPrescriptionByIdAPI(prescriptionId);
  console.log('处方详情API响应：', res);
  if (res.success) {
    prescriptionInfo.value = res.data;
    console.log('处方详情数据：', prescriptionInfo.value);
    console.log('药品清单数据：', prescriptionInfo.value.medicineList);
  } else {
    showToast.fail('未找到处方信息');
    setTimeout(() => {
      router.back();
    }, 1500);
  }
};

onMounted(() => {
  getPrescriptionDetail();
});
</script>

<style scoped>
.prescription-detail {
  min-height: 100vh;
  background-color: #f7f8fa;
  padding: 16px;
}

.loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.detail-card {
  overflow: hidden;
}

.info-section {
  margin-bottom: 16px;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
}

.section-title {
  padding: 16px 16px 8px;
  font-size: 15px;
  font-weight: bold;
  color: #323233;
}

.doctor-info {
  display: flex;
  align-items: center;
  padding: 8px 0;
}

.doctor-details {
  margin-left: 12px;
}

.doctor-name {
  font-size: 16px;
  font-weight: bold;
  color: #323233;
  margin-bottom: 4px;
}

.doctor-title,
.department {
  font-size: 14px;
  color: #969799;
  margin-top: 2px;
}

.medicine-item {
  margin-bottom: 8px;
  border-bottom: 1px solid #f5f5f5;
  padding-bottom: 8px;
}

.empty-tip {
  text-align: center;
  color: #969799;
  padding: 32px 0;
  font-size: 14px;
}

.payment-section {
  padding: 0 16px 16px;
}

.payment-section .van-button {
  border-radius: 8px;
}

.payment-popup {
  padding: 20px;
}

.payment-title {
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 20px;
}

.payment-options {
  margin-top: 10px;
}
</style>